<template>
 <div class="good-item" @click="itemClick">
  <img :src="showImage" @load="overImg"/>
  <div class="good-list">
      <p>{{gooditem.title}}</p>
      <span class="price">{{gooditem.price}}</span>
      <span class="cfav">{{gooditem.cfav}}</span>
  </div>
  <div>

  </div>
 </div>
</template>
<script>
export default {
  name:"GoodListItem",
  props:{
      gooditem:{
          type:Object,
          default(){
              return {}
          }
      }
  },
  computed:{
    showImage(){
      return this.gooditem.image||this.gooditem.show.img
    }
  },
  methods:{
    overImg(){
      this.$bus.$emit("overImg")
    },
    itemClick(){
       this.$router.push('/detail/'+this.gooditem.iid)
    }
  }
}
</script>
<style scoped>
 .good-item{
     width: 48%;
     position: relative;
     padding-bottom: 40px;
     }
 .good-item img{
     width: 100%;
     border-radius: 5px;
 }
  .good-list{
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
 }
  .good-list p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
  }
 .price {
    color:var(--color-tint);
    margin-right: 20px;
  }

  .cfav {
    position: relative;
  }

  .cfav::before {
    content: '';
    position: absolute;
    left: -15px;
    top: -1px;
    width: 14px;
    height: 14px;
    background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
  }
</style>